<!DOCTYPE html>
<html>

<head>
<title>DWV Test Viewer</title>
<meta charset="UTF-8">
<meta name="description" content="DICOM Web Viewer (DWV) simple version">
<meta name="keywords" content="DICOM,HTML5,JavaScript,medical,imaging,DWV">
<link rel="icon" href="../favicon.ico"/>
<!-- Style -->
<style type="text/css">
body {
  font-family: Arial, Helvetica, sans-serif;
}
html, body {
  height: 99%;
}
table {
  margin: 0 5px;
}
td, th {
  border: 1px solid #aaa;
  padding: 10px;
}
th {
  background: #ddd;
}
thead {
  position: sticky;
  top: 0;
}
progress {
  width: 40%;
}
span {
  font-size: small;
  font-style: italic;
}
button {
  margin: 0 3px;
}
input[type=number] {
  width: 75px;
}
input[type=color] {
  margin: 0 5px;
  width: 25px;
  height: 25px;
}
select {
  width: 90px;
}
fieldset {
  legend {
    font-size: small;
    font-style: italic;
  }
}
fieldset ul {
  padding-left: 20px;
  margin: 0;
}
#fileinput {
  width: 50%;
  border: 1px dotted gray;
}
#about {
  font-size: small;
  font-style: italic;
}
#layersdetails {
  max-height: 200px;
  overflow: auto;
  background-color: #E8E8E8;
}
.line {
  padding: 5px;
  background-color: #E8E8E8;
}
.toolFeatures {
  margin: 0 5px;
}
.ctrl-range {
  width: 100px;
  margin: 0px 10px;
}
/* special dwv */
#dwv {
  display: flex;
  min-height: 200px;
  height: 40%;
  /* compensate for layer absolute position */
  margin-bottom: 10px;
}
.layerGroup {
  flex: 1 1;
  margin: 5px 0;
  background-color: limeGreen;
  /* allow child centering */
  position: relative;
}
.layer {
  /* needed for overlay */
  position: absolute;
  /* center */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.vertical-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  margin: 5px 5px 5px 0;
  width: 10px;
  -webkit-appearance: none;
}
/** slider vertical settings*/
input.vertical-slider[type=range]::-webkit-slider-runnable-track {
  width: 10px;
  cursor: pointer;
  background: lightgray;
  border: 0;
}
input.vertical-slider[type=range]::-webkit-slider-thumb {
  width: 10px;
  height: 15px;
  background: #2F3C4A;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: 0px;
  border: 0;
}
input.vertical-slider[type=range]:disabled::-webkit-slider-thumb {
  background: lightgray;
}
input.vertical-slider[type=range]:focus::-webkit-slider-runnable-track {
  background: lightgray;
}
input.vertical-slider[type=range]::-moz-range-track {
  width: 10px;
  cursor: pointer;
  background: lightgray;
  border: 0;
}
input.vertical-slider[type=range]::-moz-range-thumb {
  width: 10px;
  height: 15px;
  background: #2F3C4A;
  cursor: pointer;
  border: 0;
}
input.vertical-slider[type=range]:disabled::-moz-range-thumb {
  background: lightgray;
}

canvas {
  /* avoid parent auto-resize */
  vertical-align: middle;
}
/** tooltip */
.layerGroup span {
  display: none;
  background-color: palegreen;
  padding: 2px;
}
.layerGroup:hover span {
  display: inline-block;
  position: absolute;
  overflow: hidden;
}
/** crossshair */
.layerGroup hr {
  pointer-events: none;
  border: none;
  position: absolute;
  margin: 0;
}
hr.horizontal {
  border-top: 2px dashed lime;
}
hr.vertical {
  border-top: 2px dashed lime;
  transform-origin: left;
  transform: rotate(90deg);
}
#brushCursor {
  pointer-events: none;
  position: absolute;
  z-index: 100;

  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 50%;
}
</style>

<!-- dwv build --><!--
<script type="text/javascript" src="./viewer.min.js" defer></script>
--><!-- local -->

</head>

<body>

<div class="line">
<label for="fileinput">Input:</label>
<input type="file" id="fileinput" multiple>
<progress id="loadprogress" max="100" value="0"></progress>
</div>

<!-- DWV -->
<div id="dwv"></div>

<div id="position-line" class="line">
<label for="position">Position:</label>
<input type="text" id="position" autocomplete="off" >
<span id="positionspan"></span>
</div>

<div id="layout-line" class="line">
<label for="changelayout">Layout:</label>
<select name="layout" id="changelayout" autocomplete="off" disabled>
 <option value="one">One</option>
 <option value="side">Side by side</option>
 <option value="mpr">MPR</option>
</select>
<button id="resetviews" disabled>Reset views</button>
<input type="checkbox" id="changesmoothing">
<label for="changesmoothing">Smoothing</label>
</div>

<div id="binders-line" class="line">
  <fieldset id="binders">
    <legend>Binders</legend>
  </fieldset>
</div>

<div id="tools-line" class="line">
  <fieldset id="tools" disabled>
    <legend>Tools</legend>
  </fieldset>
</div>

<div id="layersdetails"></div>

<br>

<div class="line" id="tests">Tests:</div>

<div class="line" id="about">About: </div>

</body>
</html>
